<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>添加书籍页面</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/layui-v2.7.6/layui/css/layui.css">
    <!--引入js-->
    <script src="http://localhost:8080/layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <form class="layui-form layui-form-pane" action="" style="margin-top: 20px">

            <div class="layui-form-item">
                <label class="layui-form-label">书籍名称</label>
                <div class="layui-input-block">
                    <input type="text" name="bookName" autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">书籍数量</label>
                <div class="layui-input-block">
                    <input type="text" name="bookCounts" autocomplete="off" placeholder="请输入" lay-verify="required"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">书籍类型</label>
                <div class="layui-input-block">
                    <select id="bookType" name="type">

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">书籍详情</label>
                <div class="layui-input-block">
                    <input type="text" name="detail" autocomplete="off" placeholder="请输入" lay-verify="required"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" pane>
                <label class="layui-form-label" style="padding: 8px 1px">储备是否充足</label>
                <div class="layui-input-block">
                    <input type="radio" name="storage" value="1" title="是" checked>
                    <input type="radio" name="storage" value="0" title="否">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">入库日期</label>
                <div class="layui-input-block">
                    <input id="date" type="text" name="date" autocomplete="off" placeholder="入库日期" lay-verify="required"
                           class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="addBook">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>

</div>


<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.jquery;
        laydate.render({
            elem: '#date'
        });
        //添加事件表单提交
        form.on('submit(addBook)', function (obj) {
            //取消表单提交的默认行为（不使用action进行提交）
            console.log(obj);
            $.post("http://localhost:8080/book/addBook", obj.field, function (d) {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            })
            return false;
        })
        //加载部门信息
        $.getJSON("http://localhost:8080/book/getBookType", function (data) {
            if (data != null) {
                var array = data;
                var str = "<option value=\"\">请选择</option>"
                for (var i = 0; i < array.length; i++) {
                    if (array[i] === 1) {
                        str += " <option  value=\"1\">计算机技术</option>";
                    } else if (array[i] === 2) {
                        str += "<option  value=\"2\">经济与投资</option>";
                    } else {
                        str += "<option value=\"3\">娱乐</option>";
                    }
                    $("#bookType").html(str);
                    form.render("select");
                }
            } else {
                layer.alert("查询类型出现错误");
            }
        })
    })
</script>
</body>
</html>